<template>
  <div class="homepage-comp-ct">
    <mt-header title="首页" fixed >
        <mt-button icon="back" @click="emulBackKey" slot="left">返回</mt-button>
    </mt-header>
    <div class="">
      <mt-tab-container v-model="selected">
        <mt-tab-container-item class="container_tab" id="tab1">
          <bl-grid :list="list" row-col="4" >
          </bl-grid>
          <hr>
          <div>
            <mt-button
              type="primary"
              size="large"
              class="cut_button"
              @click="go_r_name('page2')"
            >页面跳转-参数传递1</mt-button>
            <mt-button
              type="danger"
              size="large"
              class="cut_button"
              @click="go_path('/page3')"
            >页面跳转-参数传递2</mt-button>
            <mt-button
              size="large"
              class="cut_button"
              @click="showToast('hello world!')"
            >show_toast</mt-button>
            <mt-button
              size="large"
              class="cut_button"
              @click="go_page_noParam('/camerapage')"
            >cameraDemo</mt-button>
            <mt-button
              size="large"
              class="cut_button"
              @click="go_page_noParam('/iconfont')"
            >图标Demo</mt-button>
            <mt-button
              type="primary"
              size="large"
              class="cut_button"
              @click="go_page_noParam('/mappage')"
            >mapDemo</mt-button>
          </div>
        </mt-tab-container-item>
        <mt-tab-container-item class="container" id="tab2">
          <mt-cell v-for="n in 5" :key="n" title="tab-container 2"></mt-cell>
        </mt-tab-container-item>
        <mt-tab-container-item class="container" id="tab3">
          <mt-cell v-for="n in 15" :key="n" title="tab-container 3"></mt-cell>
        </mt-tab-container-item>
      </mt-tab-container>
      <mt-tabbar v-model="selected">
        <mt-tab-item id="tab1">
          <i class="iconfont icon-home" slot="icon"></i>
          tab1</mt-tab-item>
        <mt-tab-item id="tab2">
          <i class="iconfont icon-cart_light" slot="icon"></i>
          tab2</mt-tab-item>
        <mt-tab-item id="tab3">
          <i class="iconfont icon-my" slot="icon"></i>
          tab3</mt-tab-item>
      </mt-tabbar>
    </div>
  </div>
</template>
<script>
import {Toast} from 'mint-ui'
import {blgrid} from '@/components/blgrid'
export default {
  name: "homepage",
  data() {
    return {
      selected: "tab1",
      list:[
        {title:"列表demo",iconfont:"icon-game",bg_color:"red",href:"/listDemo"},
        {title:"扫描",iconfont:"icon-scan",bg_color:"black",href:"/camerapage"},
        {title:"百度地图",iconfont:"icon-global_light",bg_color:"blue",href:"/mappage"},
        {title:"高德地图",iconfont:"icon-global_light",bg_color:"green",href:"/degaoMap"},
        {title:"webGis",iconfont:"icon-global_light",bg_color:"green",href:"/webGis"},
        {title:"数据库",iconfont:"icon-global_light",bg_color:"black",href:"/DBPage"},
        {title:"本地文件",iconfont:"icon-global_light",bg_color:"green",href:"/fileDemo"},
        {title:"http",iconfont:"icon-global_light",bg_color:"green",href:"/httpDemo"}
      ]
    };
  },
  components: {
    'bl-grid':blgrid
  },
  methods: {
    go_r_name: function(target) {
      this.$router.push({
        name: target,
        params: {
          name: "lws"
        }
      });
    },
    go_path: function(target) {
      this.$router.push({
        path: target,
        query: {
          name: "lws--3"
        }
      });
    },
    showToast:function(msg){
      let Tmptoast = Toast({
        message:msg,
        position:'bottom',
        duration:1000
      })
    },
    getReady(){
       alert(this.GLOBAL.plusReady)
    },
    go_page_noParam(target_path){
      this.$router.push({
        path:target_path
      })
    },
    emulBackKey(){
      //模拟返回键
      document.dispatchEvent(new Event('backbutton'))
    }
  }
};
</script>
<style lang="scss" scoped>
.homepage-comp-ct {
  .cut_button {
    margin: 5px 0px;
  }
  .iconfont{
    font-size: 22px;
  }
}
</style>
